<template>
  <div class="card tab">
    <a href="#notice" class="nav" hover-class="none">
      <img class="nav-image" src="@/assets/img/nav1.svg"/>
      <span class="nav-text">
        <slot name="nav1" :childData="mydata"></slot>
      </span>
    </a>
    <router-link to="/jobs" class="nav" hover-class="none">
      <img class="nav-image" src="@/assets/img/nav2.svg"/>
      <span class="nav-text">
        <slot name="nav2"></slot>
      </span>
    </router-link>
    <router-link to="/recode" class="nav" hover-class="none">
      <img class="nav-image" src="@/assets/img/nav3.svg"/>
      <span class="nav-text">
        <slot name="nav3"></slot>
      </span>
    </router-link>
    <router-link to="/mine" class="nav" hover-class="none">
      <img class="nav-image" src="@/assets/img/nav4.svg"/>
      <span class="nav-text">
        <slot name="nav4"></slot>
      </span>
    </router-link>
  </div>
</template>
<style scoped>
.tab {
  display: flex;
  /* 设置容器内的元素在水平方向上平均分布 */
  justify-content: space-between;
  /* 设置容器内的元素在垂直方向上居中 */
  align-items: center;
  /* 允许元素换行 */
  flex-wrap: wrap;
  /* 设置内边距 */
  padding: 15px;
  /* 设置边框 */
  box-sizing: border-box;
  /* 设置字体大小 */
  font-size: 12px;
}

.nav {
  width: 25%;
  text-align: center;
}

.nav-image {
  width: 75%;
}

.nav-text {
  white-space: nowrap;
  text-align: center;
}
</style>
<script setup>
// import {ref} from 'vue' // 引入vue中的ref函数
// const mydata = ref('我是子组件数据')
</script>